<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../vue.js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p></p>
      <!-- 当函数不需要传参时，可以省略小括号 -->
      <!-- 当没有阔号时 -->
      <h3 @click="show">点击</h3>
      <!-- 当有阔号在Vue中，事件对象时需要串$event参数的 -->
      <h3 @click="show($event)">点击</h3>
      <h3 @click="show1('哈哈')">点击</h3>
      <!-- 添加修饰符，阻止默认事件 -->
      <a href="https://blog.csdn.net/OnionQueen?spm=1000.2115.3001.5343" @click.prevent="show">跳转</a>
      
      <!-- 存在默认事件，还存在事件冒泡 -->
      <div @click="show">
        <a href="https://blog.csdn.net/OnionQueen?spm=1000.2115.3001.5343" @click="show">Onion</a>
      </div>

      <!-- 阻止默认事件--prevent，阻止事件冒泡--stop -->
      <div @click="show">
        <a href="https://blog.csdn.net/OnionQueen?spm=1000.2115.3001.5343" @click.prevent.stop="show">Onion</a>
      </div>
      <div @click.once="show">一次事件</div>

      <!--  直接对应键码是可以的 -->
      <div>键盘事件 <input type="text" @keyup.13="change" /></div>
      <!-- 使用关键字也可以  -->
      <div>键盘事件 <input type="text" @keyup.enter="change" /></div>
    </div>
    <script>
      Vue.config.productionTip = false;
      new Vue({
        el: '#app',
        data: {
          name: 'Onion',
        },
        methods: {
          show() {
            // event--事件对象
            // alert(event.target.innerText);
            alert(this.name);
          },
          show1(text) {  // 形参的位置
            // alert(event.target.innerText);
            alert(text);
          },
          change() {
            console.log(222);
          },
        },
      });
    </script>
  </body>
</html>
